<template>
  <div class="flex">
    <template v-if="mode == 'one'">
      <el-image
        @click="emit('selectImg', 'img')"
        :src="config.serverImg + element.img"
        fit="scale-down"
        lazy
      />
    </template>
    <template v-else>
      <draggable
        class="list-group flex"
        tag="transition-group"
        :component-data="{
          tag: 'div',
          type: 'transition-group',
          name: !drag ? 'flip-list' : null,
        }"
        v-model="data"
        v-bind="dragOptions"
        @start="drag = true"
        @end="drag = false"
        item-key="v"
      >
        <template #item="{ element, index }">
          <div class="c8 flex list-group-item">
            <el-image
              style="width: 100%; height: 100%"
              :src="config.serverImg + element.img"
              fit="contain"
            ></el-image>
            <div class="c10" @click="data.splice(index, 1)">删除</div>
          </div>
        </template>
      </draggable>
      <div class="c8 flex" @click="emit('selectImg', index)">
        <div class="iconfont">&#xed21;</div>
      </div>
    </template>
  </div>
  <!-- <el-image @click="emit('selectImg','img')" :src="config.serverImg + element.img" fit="scale-down" lazy/> -->
</template>

<script setup>
import publicJS from "@/hook/public.js";
const { config, defaultImg } = publicJS();

const emit = defineEmits(["selectImg"]); //自定义事件
const props = defineProps({
  //是否单张图片
  is_one: {
    type: Boolean,
    default: false,
  },
  data: {
    type: Array,
    default: () => {
      return {};
    },
  },
});

//拖拽组件配置信息
import draggable from "vuedraggable";
const drag = false;
const dragOptions = computed(() => {
  return {
    animation: 200,
    group: "description",
    disabled: false,
    ghostClass: "ghost",
  };
});

//暴露方法给父组件 通过ref.value调用
defineExpose({});
</script>

<style scoped lang="scss">
.c8 {
  margin-right: 10px;
  width: 150px;
  height: 150px;
  position: relative;
  border-radius: 10px;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 1px dashed #d9d9d9;
}

.c8:hover {
  border-color: var(--el-color-primary);
  cursor: pointer;
}

.c8:hover .c10 {
  opacity: 1;
}

.c8 img {
  width: 100%;
  height: 100%;
  display: block;
}

.c9 {
  display: flex;
  justify-content: center;
  align-items: center;
}

.c10 {
  position: absolute;
  right: 0;
  bottom: 0;
  cursor: pointer;
  width: 100%;
  background: var(--el-color-primary);
  opacity: 0;
  transition: 0.3s;
  text-align: center;
  color: #fff;
  line-height: 30px;
}
</style>
